<template>
  <view class="index">
    <view class="padding">
      <div class="donate_info">
        <div class="title">种植区域: {{ payObj.planting_area_name }}</div>
        <div class="img_box">
          <img
            class="left_img"
            :src="
              payObj.picture_path ||
              'http://tree-planting.dgsxczxcjh.org.cn/image/JwcWcuL83EQCBtv2Zhb7Lc6ED76rlN6og48W5uaX.png'
            "
            alt=""
          />
          <div class="right_txt_box">
            <div class="type">{{ payObj.planting_tree_name }}</div>
            <div class="specTitle">
              已选: {{ payObj.planting_tree_specification_name }}
            </div>
            <div class="specTitle2">描述: {{ payObj.memo }}</div>
            <div class="selectdonate_amount">
              <div class="display">
                <span class="one_money">¥ {{ Number(payObj.donate_amount).toFixed(2) }}</span>
                <span class="two_number">x {{ payObj.donate_number }} </span>
              </div>
              <div class="display">
                <span class="three_all">总计: </span>
                <span class="four_allMoney">
                  ¥{{ Number(payObj.donate_amount * payObj.donate_number).toFixed(2) }}</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="contact">
        <!-- 切换 -->
        <nut-tabs
          v-model="payObj.type"
          background="#fff"
          auto-height
          @change="changeType"
        >
          <nut-tab-pane title="个人助绿" :pane-key="1">
            <div v-show="payObj.type == 1">
              <div class="middle">
                <span class="middle_left">姓名</span>
                <input
                  type="text"
                  placeholder="请输入您的姓名"
                  v-model="payObj.name"
                />
              </div>
              <div class="middle">
                <span class="middle_left">联系方式</span>
                <input
                  type="text"
                  placeholder="请输入您的联系方式"
                  v-model="payObj.contact_information"
                />
              </div>
            </div>
          </nut-tab-pane>
          <nut-tab-pane title="公司助绿" :pane-key="2">
            <div v-show="payObj.type == 2">
              <div class="middle">
                <span class="middle_left">公司或组织名称</span>
                <input
                  type="text"
                  placeholder="请输入公司或组织名称"
                  v-model="payObj.name"
                />
              </div>
              <div class="middle">
                <span class="middle_left">联系方式</span>
                <input
                  type="text"
                  placeholder="选填"
                  v-model="payObj.contact_information"
                />
              </div>
            </div>
          </nut-tab-pane>
        </nut-tabs>
      </div>
    </view>
    <div class="result">
      <div>
        <!-- 请输入您的手机和姓名就可获得《全民义务尽责证书》 -->
      </div>
      <!-- <div class="book_img"></div> -->
    </div>
    <!-- 支付按钮 -->
    <div class="tree_button_step2">
      <button @click="confirmStep2">确认支付</button>
    </div>
    <nut-toast
      :msg="msg2"
      v-model:visible="show"
      :type="type"
      :cover="cover"
    />
  </view>
</template>

<script>
// vue
import { reactive, toRefs } from "vue";
import { ref, onMounted } from "vue";
// taro
import Taro from "@tarojs/taro";
// info
import { useInfoStore } from '../../store/info'
export default {
  name: "payment",
  setup() {
    // info
    const infoStore = useInfoStore()
    // 支付参数
    const payObj = reactive({
      openid_mp: Taro.getStorageSync("openid"), //
      // imageUrl : "",
      memo: "",
      type: 1, //助绿主体类型，1个人，2公司/组织
      name: "", //助绿主体名称
      contact_information: "", //助绿主体联系方式
      donate_amount: 0, //助绿金额，单价
      donate_number: 0, //助绿数量
      donate_total: 0, //助绿金额，合计,
      planting_area_id: 0, // 种植区域id
      planting_area_name: "", //种植区域名称
      planting_tree_id: 0, //种植树种id
      planting_tree_name: "", //种植树种名称
      planting_tree_specification_id: 0, //种植树种规格id
      planting_tree_specification_name: "", //种植树种规格名称
      picture_path: "", //图片
      planting_tree_type: 0 //种植树类型，0实物 1金额
    });

    // 修改助绿类型
    const changeType = () => {
      payObj.name = "";
      payObj.contact_information = "";
    };

    // 提示
    const state = reactive({
      msg: "助绿成功", //即将前往查看我的荣誉
      msg2: "你成功了～",
      type: "text",
      show: false,
      cover: false,
    });
    const handleClick = (type, msg, cover = false) => {
      state.show = true;
      state.msg2 = msg;
      state.type = type;
      state.cover = cover;
    };

    // 确认支付
    const confirmStep2 = async () => {
      //  setTimeout(()=>{
      //           Taro.switchTab({
      //           url: `/pages/reInfo/index`,
      //         });
      // },500)
      // return
      if (payObj.name == "") {
        handleClick("text", "请填写姓名或公司名称");
        return;
      }
      if (payObj.contact_information == "") {
        handleClick("text", "请填写联系方式");
        return;
      }
      Taro.request({
        url:
          "https://tree-planting.dgsxczxcjh.org.cn/api" +
          "/planting/payDonateRecord",
        method: "POST",
        data: {
          donate_record_data: {
            ...payObj,
            type: Number(payObj.type)
          },
        },
        success: (res) => {
          // 统一处理code = 0
          if (res.data.code == 0) {
            console.log(res.data, "res.data"); //
            // 调起微信支付
            Taro.requestPayment({
              timeStamp: res.data.data.timeStamp, //Date.now().toString()
              nonceStr: res.data.data.nonceStr,
              package: res.data.data.package,
              paySign: res.data.data.paySign,
              signType: res.data.data.signType,
              success: (res) => {
                handleClick("success", "助绿成功");
                // 更新荣誉数据
                getTreeDataApi()
                setTimeout(() => {
                  Taro.switchTab({
                    url: `/pages/reInfo/index`,
                  });
                }, 2000);
              },
              fail: function (res) {
                console.log(2222, res, "res--");
                handleClick("error", "失败");
              },
            });
          } else {
            console.log(res.data, "res.data"); //
          }
        },
        fail: (err) => {
          console.log(err, "err"); //
        },
      });
    };

    // 获取数据
  // 获取数据
    const getTreeDataApi = () => {
      Taro.request({
        url:
          "https://tree-planting.dgsxczxcjh.org.cn/api" +
          "/planting/listDonateRecord",
        method: "POST",
        data: { openid_mp: Taro.getStorageSync("openid") },
        success: (res) => {
          // 统一处理code = 0
          if (res.data.code == 0) {
            // 存到仓库
             var result = res.data.data.reduce(
              function (accumulator, currentValue) {
                accumulator.num += currentValue.donate_number; // 累加数量
                accumulator.total += Number(currentValue.donate_total); // 累加总额
                return accumulator;
              },
              { num: 0, total: 0 }
            ); // 初始值为 { num: 0, total: 0 }
            const tree_total = parseFloat(result.total.toFixed(2))
            // 未请求undefined 或请求成功0 或0.00
            const last_tree_total = infoStore.info.tree_total && infoStore.info.tree_total !== 0 && infoStore.info.tree_total !==0.00 ? infoStore.info.tree_total : 0
            console.log(tree_total, "tree_total");
            console.log(last_tree_total, "last_tree_total");
            infoStore.changeInfo({...res.data, tree_num: result.num, tree_total, last_tree_total })
          } else {
            console.log(res.data, "res.data"); //
          }
        },
        fail: (err) => {
          infoStore.changeInfo({ code: -1 })
          console.log(err, "err"); //
          handleClick("error", "失败");
        },
      });
      return
    };
    // 获取路由参数
    const getParentVal = () => {
      const pages = Taro.getCurrentPages();
      const currentPage = pages[pages.length - 1];
      const route = currentPage.route;
      console.log(currentPage, "currentPage");
      if (route && currentPage.options) {
        const {
          planting_area_name,
          planting_tree_name,
          planting_tree_specification_name,
          donate_amount,
          donate_number,
          planting_area_id,
          planting_tree_id,
          planting_tree_specification_id,
          picture_path,
          memo,
          planting_tree_type
        } = currentPage.options;
        const returnVal = (val) => decodeURIComponent(val);
        const returnIntVal = (val) => parseInt(decodeURIComponent(val), 10);

        payObj.planting_area_name = returnVal(planting_area_name); //
        payObj.picture_path = returnVal(picture_path); //
        payObj.planting_area_id = returnIntVal(planting_area_id);
        payObj.planting_tree_id = returnIntVal(planting_tree_id); //
        payObj.planting_tree_specification_id = returnIntVal(planting_tree_specification_id);
        // payObj.imageUrl = returnVal(imageUrl);
        payObj.planting_tree_name = returnVal(planting_tree_name);
        payObj.planting_tree_specification_name = returnVal(
          planting_tree_specification_name
        );
        payObj.donate_amount = returnVal(donate_amount);
        payObj.memo = returnVal(memo);
        payObj.planting_tree_type = returnIntVal(planting_tree_type);
        payObj.donate_number = returnIntVal(donate_number);
        payObj.donate_total = payObj.donate_amount * payObj.donate_number;
        console.log(payObj, "payObj");
      }
    };
    onMounted(() => {
      getParentVal();
    });

    return {
      ...toRefs(state),
      getParentVal,
      handleClick,
      payObj,
      changeType,
      confirmStep2,
    };
  },
};
</script>

<style lang="scss">
.index {
  background-color: #ededed;
  height: 100vh;
  .padding {
    padding: 3vh 3vw;
    width: 94vw;
  }
  .donate_info {
    // height: 20vh;
    background-color: #fff;
    margin-bottom: 3vh;
    border-radius: 2vw;
    padding: 2vh 3vw 2vh;
    .title {
      border-bottom: 1px solid #ccc;
      font-size: 4vw;
      height: 4vh;
      line-height: 4vh;
      padding-bottom: 1vh;
    }
    .img_box {
      margin-top: 2vh;
      display: flex;
      img {
        width: 25vw;
        height: 25vw;
        border-radius: 1vw;
      }
      .right_txt_box {
        margin-left: 2vw;
        width: 60vw;
        display: flex;
        flex-direction: column;
        font-size: 3.7vw;
        .type {
          font-weight: 600;
          margin-bottom: 1vh;
          font-size: 4vw;
        }
        .specTitle {
          color: #aaa;
          margin-bottom: 0.9vh;
          font-size: 3.4vw;
        }
        .specTitle2 {
          color: #aaa;
          margin-bottom: 0.9vh;
          font-size: 3vw;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .selectdonate_amount {
          display: flex;
          justify-content: space-between;
          .display {
            display: flex;
            align-items: center;
          }
          .one_money {
            margin-right: 2vw;
          }
          .four_allMoney {
            margin-left: 1vw;
            font-weight: 600;
          }
        }
      }
    }
  }
  .nut-tab-pane {
    // padding: 0
    padding: 0 8vw 1vh;
  }
  .contact {
    // height: 18vh;
    background-color: #fff;
    margin-bottom: 3vh;
    border-radius: 2vw;
    // padding: 0 8vw 1vh;
    // padding: 0 0vw 1vh;
    .top {
      display: flex;
      justify-content: space-around;
      // margin: 2vh 0;
      padding: 1.5vh 0 1vh;
      font-weight: 600;
      .active {
        color: #1eb482;
      }
      .mySelf {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .txt {
          margin-bottom: 0.5vh;
        }
        .txt_border_height {
          height: 6px;
        }
        .txt_border_line {
          display: inline-block;
          width: 6vw;
          background-color: #1eb482;
        }
      }
    }
    .middle {
      margin: 2vh 0;
      display: flex;
      font-size: 4vw;
      .middle_left {
        width: 32vw;
        color: #222;
      }
    }
  }
  .result {
    font-size: 3.5vw;
    text-align: center;
    font-weight: 600;
    .book_img {
      height: 30vh;
    }
  }
}
.tree_box{
  // width: 100vw;
  // padding: 2vh 0;
  // height: 10vh;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  
}
.tree_button_step2 {
    position: fixed;
    background-color: #fff;
    z-index: 9999;
    bottom: 0vh;
    width: 94vw;
    padding-top: 2vh;
    padding-bottom: 2vh;
    padding-left: 3vw;
    padding-right: 3vw;
    // height: 10vh;
    button {
      background-color: #1eb482;
      color: #fff;
      border-radius: 8vw;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>
